All Categories :
HTML
Chapter 14
Form Design and Data Gathering
with CGI Scripts
CONTENTS
Now that you've seen how to create the basic form tags, let's
put that knowledge together with some of the HTML tags you've
already learned and make your forms more intuitive, attractive,
and meaningful to the user. You'll also look at how data is transferred
to the Web server and how your scripts need to be written to deal
with the data.
Central to the idea of form design is making the form as easy
for users to understand and underwhelming enough that they follow
through and fill out the form. The less incentive you have for
them to fill out the form, the less likely they are to try. A
clean, short form is more likely to entice users than a long,
confusing one.
There are a couple of rules you should consider when building
your forms so that they're easier and more effective for users:
- Use other HTML tags to make things clear. You can use
<BR>, <HR>,
and paragraph tags to set apart different "chunks" of
your form, while <B>,
<I>, and even <PRE>
can be used to make the form more easily read.
- Keep your forms short. This isn't always possible,
but when your forms are long, it's important to at least use <HR>
and similar tags to break it up a bit. If forms have smaller sections,
they're easier on the eye.
- Use intuitive design. Common sense is sometimes the
key to a good form. For instance, putting the Submit button in
the middle of the form will keep people from filling out the rest
of it. Often it's best to use <SELECT>,
radio buttons, and checkboxes to keep your users from guessing
at the type of info you want.
- Warn users of unsecured transactions. You should tell
your users if your Web server is secure-and how they can make
sure that the connection is current. If you ask for a credit card
or similar personal information over an unsecured connection,
let them know that, too.
Sound simple enough? Let's move on to some of the specifics of
this advice-and get these form tags to work.
The first rule of form design tells you to use HTML appearance
tags to make your forms more coherent to the user. Doing this
will affect the layout in one way or another-it's up to you to
decide which is best for your particular circumstance.
Unlike text-oriented HTML, your best friend in form design is
not really the paragraph tag-it's the line break tag. This is
because you want to directly affect the layout of the forms, instead
of leaving it up to the browser. Therefore, you've got to be a
little more proactive. You'll end up with a lot of line break
tags before your form is through.
Consider the following example:
<FORM>
<B>Enter your name and phone number</B>
First Name: <INPUT TYPE="TEXT" NAME="first"
SIZE="30">
Last Name: <INPUT TYPE="TEXT" NAME="last"
SIZE="40">
Phone: <INPUT TYPE="TEXT" NAME="phone"
SIZE="12">
</FORM>
Figure 14.1 illustrates how this would appear in a browser.
Figure 14.1 : These text boxes were inputted without <BR> tags.
It doesn't look terribly clean, does it? To get each of those
text boxes on a separate line, and thus more pleasing to the eye,
we need to add the <BR>
tag:
<FORM>
<B>Enter your name and phone number</B><BR>
First Name: <INPUT TYPE="TEXT" NAME="first"
SIZE="30"><BR>
Last Name: <INPUT TYPE="TEXT" NAME="last"
SIZE="40"><BR>
Phone: <INPUT TYPE="TEXT" NAME="phone"
SIZE="12"><BR>
</FORM>
Adding <BR> forces
each subsequent text box to the next line. This is a more attractive
form, and the <BR>
tags make it easier for the user to understand (see figure 14.2).
Figure 14.2 : Look at the difference the <BR> tag makes!
Notice then, that the parts of a form (like the <INPUT>
empty tag) work a lot like text in a regular HTML document. Even
if you add returns while typing, they're still ignored by the
browser. You need <BR>
tags to create new lines.
Also notice the use of instructional text for these text boxes,
which were put in boldface for the example. This is another important
tenet of form design-using HTML emphasis tags to make things clear.
Most of your forms will need instructions throughout, just like
any paper-based form. It's a good idea to standardize your instructions,
using bold or italic tags to make them stand out from your other
text.
Along that same line of thought, you should not only use instructional
text but also break your form into smaller chunks by using the
<HR> tag. Start with
Listing 14.1, which uses <BR>
and emphasis tags.
Listing 14.1 br_form.html Our
Example so Far
<FORM>
<B>Enter your name and phone number</B><BR>
First Name: <INPUT TYPE="TEXT" NAME="first"
SIZE="30"><BR>
Last Name: <INPUT TYPE="TEXT" NAME="last"
SIZE="40"><BR>
Phone: <INPUT TYPE="TEXT" NAME="phone"
SIZE="12"><BR>
<B>Enter your mailing address</B><BR>
Address: <INPUT TYPE="TEXT" NAME="address"
SIZE="50"><BR>
City: <INPUT TYPE="TEXT" NAME="city" SIZE="25">
State: <INPUT TYPE="TEXT" NAME="state"
SIZE="2">
Zip: <INPUT TYPE="TEXT" NAME="zip" SIZE="7"><BR>
<B>Enter your email address</B><BR>
Email: <INPUT TYPE="TEXT" NAME="email"
SIZE="45"><BR>
<B>Enter your comments below:</B><BR>
<TEXTAREA NAME="comments" ROWS="5" COLS="40">
Dear BigCorp,
</TEXTAREA>
</FORM>
Viewed in a browser, this form is easier for the user to understand,
with instructions in bold and textboxes where you'd expect them
(see fig. 14.3).
Figure 14.3 : Adding "chunks" to the previous example.
But there's still more you can do. By placing <HR>
tags in your form, you make it clear that new instructions are
coming up or that the form has reached the next logical chunk
of entry. The <HR>
tag simply makes it easier to look at as it guides the user through
the different parts of the form. In Listing 14.2, you add <HR>
tags at the logical breaks.
Listing 14.2 hr_form.html Adding
<HR> to the Form
<FORM>
<B>Enter your name and phone number</B><BR>
First Name: <INPUT TYPE="TEXT" NAME="first"
SIZE="30"><BR>
Last Name: <INPUT TYPE="TEXT" NAME="last"
SIZE="40"><BR>
Phone: <INPUT TYPE="TEXT" NAME="phone"
SIZE="12"><BR>
<HR>
<B>Enter your mailing address</B><BR>
Address: <INPUT TYPE="TEXT" NAME="address"
SIZE="50"><BR>
City: <INPUT TYPE="TEXT" NAME="city" SIZE="25">
State: <INPUT TYPE="TEXT" NAME="state"
SIZE="2">
Zip: <INPUT TYPE="TEXT" NAME="zip" SIZE="7"><BR>
<HR>
<B>Enter your email address</B><BR>
Email: <INPUT TYPE="TEXT" NAME="email"
SIZE="45"><BR>
<HR>
<B>Enter your comments below:</B><BR>
<TEXTAREA NAME="comments" ROWS="5" COLS="40">
Dear BigCorp,
</TEXTAREA>
</FORM>
Unfortunately, the form is a little larger now (see fig. 14.4).
But I don't think you've sacrificed the approachability by adding
<HR> tags. Increasing
the white space in a form is nearly as important as keeping it
short enough so it isn't intimidating to users. I think you'll
agree that each part of the form now just makes more sense.
Figure 14.4 : Adding <HR> tags to clearly define each new section of the form.
As you experiment with forms, you'll find that the larger the
form-and the more diverse the types of information you're asking
for-the more useful the <HR>
tag becomes in guiding your user's eye to the appropriate spots.
Paragraph tags are basically good for keeping form data together
in smaller chunks. As always, paragraph tags will add space on
either side of the text that they enclose. You don't always want
to add <HR> tags just
because your form needs some white space. For instance, here is
a nice, short comment form:
<FORM>
<B>Who are you?</B><BR>
Name: <INPUT TYPE="TEXT" NAME="name" SIZE="50"><BR>
Email: <INPUT TYPE="TEXT" NAME="name" SIZE="50"><BR>
<HR>
<B>What product line do you wish to discuss?</B><BR>
Product: <SELECT NAME="product">
<OPTION SELECTED VALUE="sport"> Sporting Goods
<OPTION VALUE="home"> Home Furnishings
<OPTION VALUE="fashion"> Clothing/Fashions
<OPTION VALUE="electron"> Electronics
</SELECT><BR>
<HR>
<B>Okay, fire away!</B><BR>
<TEXTAREA NAME="comment" ROWS="5" COLS="40">
Dear BigCorp,
</TEXTAREA>
</FORM>
Again, this is fairly easy on the eyes. But the spacing isn't
really great, and there are a lot of horizontal lines (see fig.
14.5).
Figure 14.5 : Comment form without the <P> tag.
Let's look at this closely. Consider that second <HR>
tag. Isn't that a little illogical? It seems that the user is
supposed to select the product line that they'll be discussing
in the comment form. The way it's set up, it isn't particularly
clear that the <SELECT>
menu and the comment <TEXTBOX>
are related to one another.
Using paragraph tags, then, you can get the desired spacing between
the <SELECT> and <TEXTAREA>
elements, without the horizontal line that seems to break the
two apart. You can also pad the rest of the form a bit to keep
it nicely spaced from the horizontal lines that you do
use. The key is adding <P>
tags as in the following example:
<FORM>
<P>
<B>Who are you?</B><BR>
Name: <INPUT TYPE="TEXT" NAME="name" SIZE="50"><BR>
Email: <INPUT TYPE="TEXT" NAME="name" SIZE="50"><BR>
</P>
<HR>
<P>
<B>What product line do you wish to discuss?</B><BR>
Product: <SELECT NAME="product">
<OPTION SELECTED VALUE="sport"> Sporting Goods
<OPTION VALUE="home"> Home Furnishings
<OPTION VALUE="fashion"> Clothing/Fashions
<OPTION VALUE="electron"> Electronics
</SELECT><BR>
</P>
<P>
<B>Okay, fire away!</B><BR>
<TEXTAREA NAME="comment" ROWS="5" COLS="40">
Dear BigCorp,
</TEXTAREA>
</P>
</FORM>
Isn't that better (see fig. 14.6)? Now, the <SELECT>
and <TEXTAREA> elements
appear related to one another, but things aren't as crowded as
they would be if you'd just used the <BR>
tag. (Of course, the <P>
tags don't have to be on lines by themselves in your HTML document.)
Figure 14.6 : Better spacing and more conservative use of <HR> is possible when you include the pararaph tags.
| Tip |
Different browsers will interpret multiple <BR> tags in different ways, so it's best to use the <P> tag for sufficient spacing.
|
In this example, we'll start with a site that offers the bulk
of the form elements you've learned, but none of the spacing and
layout tips just discussed. It's just a plain little form. Then,
let's go through it and change the way it looks to try to make
it more intuitive and better looking.
Of course, there aren't any truly right answers when talking about
aesthetics. By the end of this example, see if you agree with
the changes made.
The HTML for your form is in Listing 14.3.
Listing 14.3 old_form.html Making
a Form Look Better
<BODY>
<H2>Customer Survey</H2>
<P>Please fill out the following form, including your personal
information, to help us better serve you. None of the addresses
or other information in these forms will be sold without your
permission. Thank You!
</P>
<HR>
<FORM METHOD="POST" ACTION="http://www.fakecorp.com/cgi-bin/csurvey">
Enter your name and address:
Name: <INPUT TYPE="TEXT" NAME="name" SIZE="60">
Address: <INPUT TYPE="TEXT" NAME="address"
SIZE="60">
City: <INPUT TYPE="TEXT" NAME="city" SIZE="25">
State: <INPUT TYPE="TEXT"
NAME="state" SIZE="2"> Zip: <INPUT TYPE="TEXT"
NAME="zip" SIZE="5">
Phone: <INPUT TYPE="TEXT" NAME="city" SIZE="12">
Please check the type of computer you own:
<INPUT TYPE="CHECKBOX" NAME="pentium">
Pentium
<INPUT TYPE="CHECKBOX" NAME="486"> 486-series
PC
<INPUT TYPE="CHECKBOX" NAME="386"> 386-series
PC
<INPUT TYPE="CHECKBOX" NAME="mac"> Mac
<INPUT TYPE="CHECKBOX" NAME="win95">
Please check if your computer runs
Windows 95 What is your favorite way to shop for computer products
(choose one)?
<INPUT TYPE="RADIO" NAME="favorite" VALUE="mail">
Mail Order Catalog
<INPUT TYPE="RADIO" NAME="favorite" VALUE="local">
Local Computer Store
<INPUT TYPE="RADIO" NAME="favorite" VALUE="super">
Computer Superstore
<INPUT TYPE="RADIO" NAME="favorite" VALUE="net">
Internet/World Wide Web
Please enter any additional comments below:
<TEXTAREA NAME="comments" ROWS="5" COLS="70">
Enter comments here
</TEXTAREA>
Thanks for your input. Please click the Done button below to send
us your
info or click Reset to clear the form.
<INPUT TYPE="RESET">
<INPUT TYPE="SUBMIT" VALUE=" Done ">
</FORM>
</BODY>
See how this looks in a browser in figure 14.7.
Figure 14.7 : The initial attempt at the customer feedback form.
Now, let's pull this thing apart a bit and make some changes.
It's a fairly logical organization, so you should be able to figure
out what the chunks are. The first chunk is the address section,
which currently looks like the following:
Enter your name and address:
Name: <INPUT TYPE="TEXT" NAME="name" SIZE="60">
Address: <INPUT TYPE="TEXT" NAME="address"
SIZE="60">
City: <INPUT TYPE="TEXT" NAME="city" SIZE="25">
State: <INPUT TYPE="TEXT" NAME="state"
SIZE="2">
Zip: <INPUT TYPE="TEXT" NAME="zip" SIZE="5">
Phone: <INPUT TYPE="TEXT" NAME="city" SIZE="12">
All this really needs is some HTML markup, some <BR>
tags, a paragraph around it, and a horizontal line, shown in the
following code:
<P>
<B>Enter your name and address:</B><BR>
Name: <INPUT TYPE="TEXT" NAME="name" SIZE="60"><BR>
Address: <INPUT TYPE="TEXT" NAME="address"
SIZE="60"><BR>
City: <INPUT TYPE="TEXT" NAME="city" SIZE="25">
State: <INPUT TYPE="TEXT" NAME="state"
SIZE="3"
MAXLENGTH="2">
Zip: <INPUT TYPE="TEXT" NAME="zip" SIZE="5"><BR>
Phone: <INPUT TYPE="TEXT" NAME="city" SIZE="12"><BR>
</P>
<HR>
As discussed in Chapter 13, it's also
a good idea to set the size of your textbox a little larger than
the MAXLENGTH. In this case,
though, you've only changed the MAXLENGTH
of state since you want to
allow users to enter more than the allotted characters in other
textboxes (hence, no MAXLENGTH
value).
Your next chunk is the computer-related questions. It might seem
like two chunks, but let's use the idea of putting them in the
same section of the form, since they are similar and don't take
up much space. Here's the original code for this chunk:
Please check the type of computer you
own:
<INPUT TYPE="CHECKBOX" NAME="pentium">
Pentium
<INPUT TYPE="CHECKBOX" NAME="486"> 486-series
PC
<INPUT TYPE="CHECKBOX" NAME="386"> 386-series
PC
<INPUT TYPE="CHECKBOX" NAME="mac"> Mac
<INPUT TYPE="CHECKBOX" NAME="win95">
Please check if
your computer runs
Windows 95 What is your favorite way to shop for
computer products (choose one)?
<INPUT TYPE="RADIO" NAME="favorite" VALUE="mail">
Mail
Order Catalog
<INPUT TYPE="RADIO" NAME="favorite" VALUE="local">
Local Computer Store
<INPUT TYPE="RADIO" NAME="favorite" VALUE="super">
Computer Superstore
<INPUT TYPE="RADIO" NAME="favorite" VALUE="net">
Internet/World Wide Web
How can you fix this? You need to be more specific about where
the checkboxes and radio buttons end and how they are allowed
to wrap with the browser screen (using <BR>).
Plus, you should separate the three questions with
<P> tags, like the following:
<P><B>Please check the type
of computer(s) you own:</B><BR>
<INPUT TYPE="CHECKBOX" NAME="pentium">
Pentium
<INPUT TYPE="CHECKBOX" NAME="486"> 486-series
PC
<INPUT TYPE="CHECKBOX" NAME="386"> 386-series
PC
<INPUT TYPE="CHECKBOX" NAME="mac"> Mac<BR>
</P>
<P>
<INPUT TYPE="CHECKBOX" NAME="win95">
Please check if your computer runs
Windows 95
</P>
<P><B>What is your favorite way to shop for computer
products (choose one)?
</B><BR>
<INPUT TYPE="RADIO" NAME="favorite" VALUE="mail">
Mail Order Catalog<BR>
<INPUT TYPE="RADIO" NAME="favorite" VALUE="local">
Local Computer Store<BR>
<INPUT TYPE="RADIO" NAME="favorite" VALUE="super">
Computer Superstore<BR>
<INPUT TYPE="RADIO" NAME="favorite" VALUE="net">
Internet/World Wide Web<BR>
</P>
<HR>
The three questions were separated into paragraphs, with an <HR>
tag added at the bottom, since this would be one section. Also
notice that the radio buttons all got <BR>
tags, while we left the checkboxes. Why? Because it's always best
to save space (by leaving the checkboxes on one line). But counting
the characters in the descriptions of the radio buttons tells
us that a single line of radio buttons would be well over 80 characters
long-and that's likely to wrap oddly in the browser window.
The final two chunks currently look like this:
Please enter any additional comments
below:
<TEXTAREA NAME="comments" ROWS="5" COLS="70">
Enter comments here
</TEXTAREA>
Thanks for your input. Please click the Done button below to send
us your
info or click Reset to clear the form.
<INPUT TYPE="RESET">
<INPUT TYPE="SUBMIT" VALUE=" Done ">
These chunks only need minor touch ups. Let's separate the control
buttons from the comment window and add some formatting:
<P><B>Please enter any additional
comments below:</B><BR>
<TEXTAREA NAME="comments" ROWS="5" COLS="70">
Enter comments here
</TEXTAREA>
<P>
<HR>
<P>Thanks for your input. Please click the Done button below
to send us your info or click Reset to clear the form.<P>
<INPUT TYPE="RESET"><BR>
<INPUT TYPE="SUBMIT" VALUE=" Done "><BR>
<HR>
Then you close the form tags and you're done. By the way, that
last little <HR> isn't
really necessary-just my personal preference. And how does it
look in a browser now? Take a look at figure 14.8.
Figure 14.8 : Our mastepiece of a customer service survey.
So you've used <P>,
<BR>, and <HR>
tags for spacing things out and offering logical breaks for your
forms. But what about other issues, like aligning form elements?
You can turn to <PRE>
tags and HTML list tags for that.
One of the most annoying parts of setting up a form so far has
been the inability to line up textbox fields as they go down the
page. For instance, whenever the Name:
and Address: fields have
been used in examples, they always look a little ragged.
The solution is the <PRE>
tag. Because anything between the two tags uses the spacing and
returns, this tag does two things. First, it allows you to line
up your textboxes. Second, it eliminates the need for <BR>
tags at the end of <INPUT>
tags, since the browser will recognize your returns. The following
is a ragged example:
Favorite Book: <INPUT TYPE="TEXT"
NAME="book" SIZE="40"><BR>
Best Food: <INPUT TYPE="TEXT" NAME="food"
SIZE="30"><BR>
Favorite Music Group: <INPUT TYPE="TEXT" NAME="music"
SIZE="40"> <BR>
Personal Quote: <INPUT TYPE="TEXT" NAME="quote"
SIZE="60"><BR>
Displayed (between <FORM>
tags) in a browser, this looks like figure 14.9.
Figure 14.9 : Ragged textboxes in a form.
To improve this situation, you can put this HTML between <PRE>
tags and format them yourself:
<PRE>
Favorite Book: <INPUT
TYPE="TEXT" NAME="book" SIZE="40">
Best Food:
<INPUT TYPE="TEXT" NAME="food" SIZE="30">
Favorite Music Group: <INPUT TYPE="TEXT"
NAME="music" SIZE="40">
Personal Quote: <INPUT
TYPE="TEXT" NAME="quote" SIZE="60">
</PRE>
Remember that you need to use spaces, not tabs, to create the
space between the name of the box and the textbox itself. As before,
you may need to play with the formatting a little to get things
lined up like they are in figure 14.10.
Figure 14.10 : A much cleaner looking form.
| Tip |
If you can, set your text editor to a monospaced font (like Courier) for editing text inside your <PRE> tags. Doing this will allow you to see exactly how <PRE> text will be displayed when viewed in a browser since <PRE> forces your browser to use a monospaced font.
|
The last little form design tricks you'll look at involve using
the list tags-especially <OL>,
<UL>, and <DL>-to
create organization for your forms. Nearly any form element can
be part of a list, and there are often good reasons to use them.
Consider the following example:
<DL>
<DT> Please choose the type of pet you're interested in:
<DD> <INPUT TYPE="RADIO" NAME="pet"
VALUE="dog"> Dog
<DD> <INPUT TYPE="RADIO" NAME="pet"
VALUE="cat"> Cat
<DD> <INPUT TYPE="RADIO" NAME="pet"
VALUE="fish"> Fish
<DD> <INPUT TYPE="RADIO" NAME="pet"
VALUE="bird"> Bird
</DL>
You've used lists in this way before-to create indented lists
or outline formats that help you communicate a little better.
In this case, it also makes the form look a little better, too
(see fig. 14.11).
Figure 14.11 : Use list tags to spruce things up.
A great excuse for using the <OL>
tag is to create form elements that are numbered for some reason.
Since the <LI> tag
for an ordered list enters a number, you can simply add form elements
to create a numbered form, as in the following example:
Enter your guesses for the top three
movies this week: <BR>
<OL>
<LI> <INPUT TYPE="TEXT" NAME="movie1"
SIZE="40">
<LI> <INPUT TYPE="TEXT" NAME="movie2"
SIZE="40">
<LI> <INPUT TYPE="TEXT" NAME="movie3"
SIZE="40">
</OL>
Seen through a browser, each entry is numbered, eliminating the
need for individual descriptive text (see fig. 14.12).
Figure 14.12 : You can use an ordered list for your form.
Let's see if you can do an even better job with the customer service
form you created earlier in this chapter. Now, you have the opportunity
to clean up some of those textboxes and other chunks. Listing
14.4 shows the example as it stands (recall that figure 14.8 showed
this same form in a browser).
Listing 14.4 survey.html Customer
Service Form
<BODY>
<H2>Customer Survey</H2>
<P>Please fill out the following form, including your personal
information, to help us better serve you. None of the addresses
or other information in these forms will be sold without your
permission. Thank You!
</P>
<HR>
<FORM METHOD="POST" ACTION="http://www.fakecorp.com/cgi-bin/csurvey">
<P>
<B>Enter your name and address:</B><BR>
Name: <INPUT TYPE="TEXT" NAME="name" SIZE="60"><BR>
Address: <INPUT TYPE="TEXT" NAME="address"
SIZE="60"><BR>
City: <INPUT TYPE="TEXT" NAME="city" SIZE="25">
State: <INPUT TYPE="TEXT" NAME="state"
SIZE="3" MAXLENGTH="2">
Zip: <INPUT TYPE="TEXT" NAME="zip" SIZE="5"><BR>
Phone: <INPUT TYPE="TEXT" NAME="city" SIZE="12"><BR>
</P>
<HR>
<P><B>Please check the type of computer(s) you own:</B><BR>
<INPUT TYPE="CHECKBOX" NAME="pentium">
Pentium
<INPUT TYPE="CHECKBOX" NAME="486"> 486-series
PC
<INPUT TYPE="CHECKBOX" NAME="386"> 386-series
PC
<INPUT TYPE="CHECKBOX" NAME="mac"> Mac<BR>
</P>
<P>
<INPUT TYPE="CHECKBOX" NAME="win95">
Please check if your computer runs
Windows 95
</P>
<P><B>What is your favorite way to shop for computer
products (choose one)?
</B><BR>
<INPUT TYPE="RADIO" NAME="favorite" VALUE="mail">
Mail Order Catalog<BR>
<INPUT TYPE="RADIO" NAME="favorite" VALUE="local">
Local Computer Store<BR>
<INPUT TYPE="RADIO" NAME="favorite" VALUE="super">
Computer Superstore<BR>
<INPUT TYPE="RADIO" NAME="favorite" VALUE="net">
Internet/World Wide Web<BR>
</P>
<HR>
<P><B>Please enter any additional comments below:</B><BR>
<TEXTAREA NAME="comments" ROWS="5" COLS="70">
Enter comments here
</TEXTAREA>
<P>
<HR>
<P>Thanks for your input. Please click the Done button below
to send us
your info or click Reset to clear the form.<P>
<INPUT TYPE="RESET"<BR>
<INPUT TYPE="SUBMIT" VALUE=" Done "><BR>
<HR>
</FORM>
</BODY>
Clearly, the first chunk can benefit from the <PRE>
tag so that you can line up those address lines. You might notice
that because you're using the <PRE>
tag, you no longer need the <BR>
tag to end some of the lines, as in the following code:
<P>
<B>Enter your name and address:</B><BR>
<PRE>
Name: <INPUT TYPE="TEXT" NAME="name"
SIZE="60">
Address: <INPUT TYPE="TEXT" NAME="address"
SIZE="60">
City: <INPUT TYPE="TEXT" NAME="city"
SIZE="25">
State: <INPUT TYPE="TEXT" NAME="state"
SIZE="3" MAXLENGTH="2">
Zip: <INPUT TYPE="TEXT" NAME="zip"
SIZE="5">
Phone: <INPUT TYPE="TEXT" NAME="city"
SIZE="12">
</PRE>
</P>
<HR>
What else can you do? Let's put the second chunk in list format.
You can use a <DL>
style list for the series of radio buttons. You probably shouldn't
change the checkboxes since they're already formatted to appear
on one line. The following code includes these changes:
<P><B>Please check the type
of computer(s) you own:</B><BR>
<INPUT TYPE="CHECKBOX" NAME="pentium">
Pentium
<INPUT TYPE="CHECKBOX" NAME="486"> 486-series
PC
<INPUT TYPE="CHECKBOX" NAME="386"> 386-series
PC
<INPUT TYPE="CHECKBOX" NAME="mac"> Mac<BR>
</P>
<P>
<INPUT TYPE="CHECKBOX" NAME="win95">
Please check if your computer runs
Windows 95
</P>
<DL>
<DT><B>What is your favorite way to shop for computer
products (choose one)?
</B>
<DD><INPUT TYPE="RADIO" NAME="favorite"
VALUE="mail"> Mail Order Catalog
<DD><INPUT TYPE="RADIO" NAME="favorite"
VALUE="local"> Local Computer Store
<DD><INPUT TYPE="RADIO" NAME="favorite"
VALUE="super"> Computer Superstore
<DD><INPUT TYPE="RADIO" NAME="favorite"
VALUE="net"> Internet/World Wide Web
</DL>
Notice that the <BR>
tags at the end of each radio button entry are no longer required
since each <DD> tag
automatically appears on its own line.
The rest of the form can pretty much stand on its own. See how
the whole thing looks in a browser in figure 14.13.
Figure 14.13 : Our customer service form, now complete.
Before we're finished discussing HTML forms, we should touch on
how data is passed to the Web server and how your script needs
to be written to handle this data. First, you'd better start with
a quick discussion of CGI-BIN scripts.
For the most part, CGI-BIN scripts are designed to receive values
from your user and then create HTML code programmatically
(or on-the-fly) by way of response. Scripts are most often used
to handle form data but can also be used to add things like "hit"
counters and variable images (different images that appear
at different times). For instance, to add a counter to your page,
you might have the following:
<IMG SRC="/cgi-bin/counter.pl">
This will cause the script counter.pl
to be run and a value returned. The value will be the name of
a graphics file, which will be used to display an odometer-style
image, as in figure 14.4.
Figure 14.14 : Adding a hit counter by calling a CGI-BIN script.
An URL to a script can be used just about anywhere you might use
an URL to another document, a hypermedia file, or an image. In
a hypertext link, for instance, you might use a script that chooses
a "random" Web page to return, as in the following:
<A HREF="/cgi-bin/random.pl">Click
me for a surprise
Web page!</A>
Actually creating the scripts is a little beyond the scope of
this book. Most of the time, CGI-BIN scripts are written in Perl,
C, Visual Basic, or a scripting language like AppleScript. If
you're a programmer, I'd recommend looking into a book that seriously
discusses the ins and outs of CGI programming. Creating scripts
can be complicated, but rewarding-especially if you have access
to your Web server and aspire to be a Webmaster as well as an
HTML designer.
| Tip |
Look into Que's Special Edition Using CGI for an in-depth discussion of CGI scripts and programming.
|
In the case of forms, you've already seen that you call the CGI-BIN
script in the <FORM>
tag using the ACTION attribute.
Once the script receives the data, it then needs to use that data
to create an HTML "results" page, which is sent back
to the browser.
You may recall from Chapter 13 that there
are two different METHODs
to pass data to the script you've created to deal with it. The
two methods, GET and POST,
cause data to be sent in different ways.
The type of METHOD used to
send the data is stored in an environment variable on the Web
server called REQUEST_METHOD.
The GETNT> method simply appends
your form data to the URL and sends it to the server. Most servers
will then store this data in another environment variable called
QUERY_STRING. This string
is generally limited to less than one kilobyte of data (approximately
1,000 characters) which explains why it is becoming less popular.
The POST method causes the
length of the data string to be stored in a variable called CONTENT_LENGTH,
while the data itself is redirected to stdin
(standard in). In effect, the data is made to appear to your script
or program that it was typed into the server using a typical keyboard.
Your script must then be designed to "parse" that input.
| Tip |
I'd let a program do your parsing for you. cgi-bin.pl is the Perl library for this. Mac Web servers might use Parse CGI for AppleScript.
|
Generally speaking, programs that do this for you are already
available. There are actually two steps to receiving the input:
decoding and parsing. Data sent from your Web browser is encoded
to avoid data loss-essentially by turning spaces into plus signs
(+) and non-text characters (like !) into a percent sign (%) and
a hexadecimal code.
Once you've worked through the decoding process, you're left with
a text input that follows this format (where the ampersand simply
separates each pairing of NAME
and VALUE):
NAME1=VALUE1&NAME2=VALUE2&...
An example of this is:
ADDRESS=1234 MAIN ST&CITY=DALLAS&STATE=TX
and so on. If you're not using a parsing program or library (which,
ideally, would allow you to simply reassign the VALUEs
in this file to variables in your script), then your script will
need to accept this data, strip the ampersands, and reassign the
values to appropriate variables.
Output is much easier. Because stdout
(standard out) is redirected to the HTML browser, you simply need
to use print (Perl and other
languages), lprint (C language),
or similar commands that print directly to the screen (or terminal
or console). You use the print
command to output HTML codes, just as if you were using your text
editor.
Here's a short snippet of a Perl script to do just that:
print "Content-type: text\html\n\n";
print "<HTML>\n<HEAD><TITLE>Response</TITLE></HEAD>\n"
print "<BODY>\n<H2>Success</H2>\n<P>Thank
you for your
submission<\P>\n"
print "<P>Click <A HREF="index.html">here</A>
to go
back <\P>\n</BODY>\n</HTML>"
In a number of programming languages \n
is the newline character, which simply feeds a Return to standard
out. Otherwise, this should seem (and look) rather familiar (see
fig. 14.15). It's just HTML!
Figure 14.15 : Results of the snippet of Perl scripting.
Form design is something of an art and science-it's important
that forms look good and be easy for the user to follow if they're
going to be effective. There are some general rules you can follow
for form design and, using other HTML commands you've learned
previously, you can make your forms very easy to read. That, in
turn, makes users more likely to use them.
It's also important for Web designers to have some idea how forms
send their data to the Web server and associated script-even if
they don't intend to create the scripts themselves. A designer
with almost any programming experience will find it fairly
easy to manage data-gathering scripts from their Web site.
- Why is the <BR>
tag more effective than the <P>
tag for individual lines of forms?
- Is it possible to use HTML tags (like <B>
and <I>) within the
confines of a <FORM>
tag? What about just plain text?
- What are "chunks" of form elements?
- What do <P> tags
offer you that help break up chunks of form elements? Why not
just use multiple <BR>
tags?
- How can you get checkboxes and radio buttons to appear on
a single line on your Web page?
- What does MAXLENGTH do
for <INPUT TYPE="TEXT">
style form elements? How is this error-checking?
- What does the <PRE>
tag allow you to do with forms? What do you "lose" by
using the <PRE> tag?
- What's the point in using a <DL>
style list in a form? Why not use an <UL>
list?
- How can <OL> lists
keep you from having to add descriptive text to each line of your
form?
- What METHOD of form data
transfer is more popular? Why? Which is easier for programmers?
- Why is it so simple to output HTML with a server-based script?
What does the Web browser "act like?"
- Use <PRE> to make
the following form easier to read:
<FORM METHOD="POST" ACTION="/cgi-bin/searcher">
Enter a Search phrase and a type of search (AND, OR, NOT).
Search phrase: <INPUT TYPE="TEXT" NAME="SearchFor"
SIZE=38>
Type of search: <SELECT NAME="SearchType">
<OPTION SELECTED VALUE="and"> AND
<OPTION VALUE="or"> OR
<OPTION VALUE="not"> NOT
</SELECT>
<INPUT TYPE="submit" NAME="Submit" VALUE="Start
the Search">
</FORM>
- Create a form that allows the user to subscribe to a fictional
magazine. Include different "chunks" for name and address,
demographic information, and a credit card number. Also use layout
and HTML emphasis to make it clear to the user what information
is required and what information is optional.
- If you understand how to program in Perl, C, or another CGI
scripting language and you have access to your Web server (so
you can place the script in the cgi-bin
directory), create a script that accepts the value from the following
simple form and outputs the appropriate HTML coded text:
<FORM METHOD="POST" ACTION="/cgi-bin/picker">
How would you like the next page to appear?<BR>
<SELECT NAME="Appear">
<OPTION SELECTED VALUE="bold"> bold
<OPTION VALUE="ital"> italics
<OPTION VALUE="list"> in an HTML list
</SELECT>
<INPUT TYPE="submit" NAME="Submit" VALUE="Create
the Page">
